<template>
	<view class="pages">
		<scroll-view scroll-y="true" class="contentbox" @scrolltolower="scrolltolower">
			<view v-if="list.length == 0">
				<view style="height: 100rpx"></view>
				<u-empty text=" - 暂无数据 - " mode="list"></u-empty>
			</view>
			<view class="boxes flex" v-for="(item, index) in list" :key="index">
				<view @click="clicklook(index)" v-if="item.images.length>0" style="width: 160rpx;flex-shrink: 0;">
					<u-swiper :list="item.images" :height="80"  :autoplay="false" circular></u-swiper>
				</view>
				<view class="message">
					<view class="font-size-30">
						<text class="bold">姓名：</text>
						<text style="color: #457fd3">{{ item.name }}</text>
					</view>
					<view class="font-size-30" @click="call(item.phone)">
						<text class="bold">手机号码：</text>
						<text style="color: #457fd3">{{ item.phone }}</text>
					</view>
					<view class="font-size-30 m-b-12">
						<text class="bold">货物描述：</text>
						<text>{{item.content}}</text>
					</view>
				</view>
			</view>
			<drag-button :isDock="true" @btnClick="btnClick" />
		</scroll-view>
	</view>
</template>

<script>
import commonUtil from '@/utils/format.js'
const app = getApp();
import dragButton from '@/components/drag-button/drag-button.vue';
export default {
	components: {
		dragButton
	},
	data() {
		return {
			ifshow:true,
			is_vip: 0,
			page: 1,
			limit: 20,
			length: true,
			list: [
				// { id: 1, phone: 13515478545 },
				// { id: 1, phone: 13515478545 }
			]
		};
	},
	onLoad(options) {
		this.is_vip = app.globalData.is_vip;
	},
	async onShow() {
		if(this.ifshow){
			this.page = 1;
			this.limit = 20;
			this.list = [];
			await this.getList();
		}else{
			this.ifshow = true;
		}
	},
	methods: {
		btnClick() {
			uni.navigateTo({
				url: '/pages/index/boxes/box2add'
			});
		},
		clicklook(index){
			this.ifshow = false;
			let n = this.list[index].images;
			commonUtil.lookImgAll(n,0);
		},
		call(e) {
			if (!this.is_vip) {
				this.$modal({
					title: '暂无查看和拨打权限!',
					msg: '去获取',
					active: app.globalData.active
				});
				return;
			}
			this.ifshow = false;
			uni.makePhoneCall({
				// 手机号
				phoneNumber: e + '',
				// 成功回调
				success: (res) => {
					console.log('调用成功!');
				},
				// 失败回调
				fail: (res) => {
					console.log(res);
					console.log('调用失败!');
				}
			});
		},
		// 上拉
		scrolltolower() {
			console.log('触底');
			if (this.length) {
				this.page++;
				this.getList();
			}
		},
		// 列表
		async getList() {
			let res = await this.$api.huowu({
				page_no: this.page,
				page_size: this.limit
			});
			if (res.code == 1) {
				let id = res.data.lists[0].id;
				uni.setStorageSync('old_id',id)
				this.length = res.data.lists.length == this.limit;
				this.list.push(...res.data.lists);
			}
		}
	}
};
</script>

<style scoped lang="less">
.pages {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.contentbox {
	flex: 1;
	overflow: hidden;
	padding: 20rpx 15rpx;
	box-sizing: border-box;

	.boxes {
		padding: 25rpx 30rpx;
		margin-bottom: 17rpx;
		border-radius: 20rpx;
		border: 1px solid #eee;
		
		.message{
			margin-left: 24rpx;
			line-height: 160%;
		}
	}
}
</style>
